<script setup lang="ts" name="Login">
import {ref} from "vue"
import {post} from "@/assets/request.ts"
import router from "@/router/index.ts";
import {ElMessage} from "element-plus";

//定义  用户登录的对象
let loginForm = ref({userName:'',password:''});
let msg = ref('');

const login = () => {
  // 该方法  用于发起请求（post请求）
  // http://localhost:8083 >>>> /api
  post('/api/login',{userName:loginForm.value.userName,password:loginForm.value.password})
      .then(response=>{
    // 请求成功后

    if(parseInt(response.result)==1){
      // 将登录的结果 转换为JSON字符串，缓存在session中
      sessionStorage.setItem('user',JSON.stringify(response));
      //     历史记录追加
      router.push({name:'main'})
      return
      //替换式
      // router.replace({name: 'main'});
    }else if(parseInt(response.result)==2){
      msg.value="密码错误！！！"
    }else{
      msg.value="未找到该用户"
    }
        ElMessage({
          message: msg.value,
          type: 'error',
        })
  })
}


</script>

<template>
  <div class="box">
    <div id="box_login">
  <!--    使用表单获取用户输入的数据-->
      <el-form :model="loginForm" label-width="80px">
        <el-form-item label="账号：" prop="username">
<!--          用于获取用户账户的文本框-->
          <el-input v-model="loginForm.userName" style="width: 300px;" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码：" prop="password">
          <!--          用于获取用户密码的文本框-->
          <el-input v-model="loginForm.password" type="password" style="width: 300px;" placeholder="请输入密码" @keydown.enter="login"></el-input>
        </el-form-item>
        <el-form-item>
<!--        按钮-->
          <el-button @click="login" style="width: 300px;" type="primary">登录</el-button>
          <span style="margin: auto;padding-right:40px;color: #81807f">还没有账号？<a href="#" style="text-decoration: none" @click="router.push({name:'register'})">去注册</a></span>
        </el-form-item>
      </el-form>

    </div>
  </div>

</template>

<style scoped lang="css">
  .box{
    background-image: url("../assets/login.jpg");
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: -800px -1000px;
    width: 100%;
    height: 100vh;
  }

  #box_login{
    border-radius: 20px;
    position: fixed;
    background-color: rgba(0,0,0,.3);
    width: 410px;
    padding: 20px;
    left: 30%;
    top: 30%;
  }

  ::v-deep  .el-form-item .el-form-item__labal{
    color: white;
  }

</style>